<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Metronic Admin Theme #1 | Form Layouts</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="Preview page of Metronic Admin Theme #1 for form layouts" name="description" />
    <meta content="" name="author" />
    <link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../assets/custom/css/iconfont.css"/>
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />


    <link href="../assets/global/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" type="text/css" />

    <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../assets/global/css/plugins.min.css" rel="stylesheet"  type="text/css" />
    <link rel="stylesheet" href="../assets/global/plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../assets/custom/css/changeother.css"/>

<body>
<div class="portlet light">
    <div class="portlet-title tabbable-line">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#portlet_tab1" data-toggle="tab">搜索表 </a>
            </li>
            <li>
                <a href="#portlet_tab2" data-toggle="tab">搜索关系 </a>
            </li>
            <li >
                <a href="#portlet_tab3" data-toggle="tab">搜索字段</a>
            </li>
        </ul>
    </div>
    <div class="portlet-body">
        <div class="tab-content">
            <div class="tab-pane active" id="portlet_tab1">
                <div class="from_control clearfix">
                        <div class="demoTable">
                            <div class="layui-inline data_search fl">
                                <input class="inputSmall" name="id" id="demoReload" autocomplete="off">
                            </div>
                            <button class="btn layui-btn blue-hoki fl" data-type="reload">搜索</button>
                        </div>
                </div>

                <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>

            </div>
            <div class="tab-pane" id="portlet_tab2">
                <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
                    ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                    et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo. </p>
                <p>
                    <a class="btn red" href="ui_tabs_accordions_navs.html#portlet_tab2" target="_blank"> Activate this tab via URL </a>
                </p>
            </div>
            <div class="tab-pane" id="portlet_tab3">
                <div class="from_control clearfix">
                    <div class="demoTable">
                        <div class="layui-inline data_search fl">
                            <input class="inputSmall" name="id" id="demoReload3" autocomplete="off">
                        </div>
                        <button class="btn layui-btn blue-hoki fl" data-type="reload">搜索</button>
                    </div>
                </div>

                <table class="layui-hide" id="LAY_table_user3" lay-filter="user"></table>
            </div>
        </div>
    </div>
</div>


<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="../assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="../assets/pages/scripts/components-select2.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script src="../assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
<script src="../assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
<script src="../assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
<script src="../assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>

<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/layui/layui.all.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            ,url: 'layui_table.json'
            ,cols: [[
                {field:'id', title: '流程名称', minWidth:80,}
                ,{field:'username', title: '来源数据对象名', minWidth:80}
                ,{field:'sex', title: '来源表名', minWidth:80,}
                ,{field:'city', title: '来源数据源', minWidth:80}
                ,{field:'sign', title: '抽取方式', minWidth:80}
                ,{field:'experience', title: '运行频率', minWidth:80}
                ,{field:'score', title: '最后启动时间', minWidth:80}
                ,{field:'classify', title: '启用否', minWidth:80}
                ,{field:'wealth', title: '运行状态', minWidth:80}
                ,{width:200, align:'center', toolbar: '#barDemo',title:'操作'}
            ]]
            ,id: 'testReload'
            ,page: true
            ,height: 'full-150'
            ,done :function(){
                console.log('hahha')
            }
        });

        table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'detail'){ //查看
                //do somehing
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            }
        });

        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: {
                            id: demoReload.val()
                        }
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

    $(".dropdown-menu").on('click','a',function(){
        if($(this).hasClass('process_tb_copy')){
            layer.open({
                type : 2,
                content : ['tableCopy.html'],
                area: ['900px', '600px'],
                maxmin : true,
                title : '单表复制流程'
            })
        }else if($(this).hasClass('process_tb_map')){
            layer.open({
                type : 2,
                content : ['tableMap.html'],
                area: ['900px', '600px'],
                maxmin : true,
                title : '表映射流程'
            })
        }
    })
</script>
</body>

</html>